<!--
 * @Date: 2020-01-12 15:30:29
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-04-15 20:06:59
 * @FilePath: /GIV/src/native/index.vue
 -->
<template>
  <div class="layout">
    <x-tabbar :usersId="userId" ref="tabBarAct">
      <div class="item-container" :style="contentStyle">
        <home ref="messageCom" :userId="userId"></home>
      </div>
      <div class="item-container" :style="contentStyle">
        <category ref="appcenterCom" :userId="userId"></category>
      </div>
      <div class="item-container" :style="contentStyle">
        <cart ref="maillistCom" :userId="userId"></cart>
      </div>
      <div class="item-container" :style="contentStyle">
        <user ref="myinfo" :userId="userId"></user>
      </div>
    </x-tabbar>

    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoadings">
      <floading class="indicatorC" color="#303030"></floading>
    </div>
  </div>
</template>
<script>
const logOutBroad = new BroadcastChannel("logOut");
const AddCart = new BroadcastChannel("AddCart");
const DelCart = new BroadcastChannel("DelCart");
import Utils from "./mixin/utils";
//
import asCore from "./mixin/core";

export default {
  components: {
    "x-tabbar": require("./component/mainpage.vue"),
    home: require("./app/main/home.vue"),
    category: require("./app/main/category.vue"),
    cart: require("./app/main/cart.vue"),
    user: require("./app/main/user.vue")
  },
  data() {
    return {
      isLoadings: true,
      currentPage: 0,
      userId: "",
      contentStyle: []
    };
  },
  created() {
    let that = this;

    const notify = weex.requireModule("notify");
    notify.regist("login", function(res) {
      that.log(res);
      that.initData();
    });

    logOutBroad.onmessage = function() {
      that.userId = "";
      that.$refs.tabBarAct.getCardNum();
      that.$refs.maillistCom.getpageData();
    };
    AddCart.onmessage = () => {
      that.$refs.maillistCom.loadData();
      that.$refs.tabBarAct.getCardNum();
    };
    DelCart.onmessage = () => {
      that.$refs.tabBarAct.getCardNum();
      this.log("购物车删除了");
    };
    //页面高度
    const tabPageHeight = Utils.env.getPageHeight();

    let headHeight = -120;
    if (this.isIpx) {
      headHeight = -198;
    }
    if (this.isWeb) {
      headHeight = -120;
      if (this.isIpx) {
        headHeight = -198;
      }
    }

    this.contentStyle = {
      height: tabPageHeight + headHeight + "px"
    };
  },
  mounted() {
    var navigator = weex.requireModule("navigator");
    if (!this.isWeb) {
      navigator.setRoot("A");
      navigator.setPageId("A");
    }
    this.initData();
  },
  methods: {
    initData() {
      this.log("----");
      let that = this;
      that.isLoadings = true;
      asCore.getBsessionid(sessionid => {
        if (!sessionid) {
          that.$refs.messageCom.loadData();
          // that.push("root:app/login/login.js");
        } else {
          that.userId = sessionid;
          asCore.autoLogin(() => {
            that.$refs.messageCom.loadData(sessionid);
            // that.$refs.appcenterCom.loadData(sessionid);
            that.$refs.maillistCom.loadData(sessionid);
            that.$refs.myinfo.loadData(sessionid);
            that.$refs.tabBarAct.getCardNum();
          });
        }
        setTimeout(() => {
          that.isLoadings = false;
        }, 500);
      });
    },
    onLoad(param) {
      const page = weex.requireModule("page");
      page.doubleBack();
    },
    onResume() {
      const navbar = weex.requireModule("navbar");
      navbar.setStatusBarStyle("white");
    },
    gonext(url) {
      //this.push('test.js',{name:"ssss"})
      this.push(url);
    }
  }
};
</script>
<style >
.layout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.item-container {
  flex: 1;
  width: 750px;
  background-color: #f5f5f5;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicatorC {
  width: 40px;
  height: 40px;
}
</style>
